<template>
  <div class="evidenceDetailspage">
      <div class="containerBox">
        <div class="download">
          <el-button class="d_botton iconfont icon-xiazai-wenjianxiazai-16" @click="download">下载报告</el-button>
        </div>
        <div class="containerMain">
          <div class="top">
            <div class="titleBox">
              <img src="../../../assets/images/forensic/logo.png" alt="" class="logo">
              <div class="title">
                <p>多媒体内容塑造与智能取证应用平台</p>
                <p>取证报告</p>
              </div>
            </div>
            <div class="top_lineTitle">
              <div class="text">
                取证基本信息
              </div>
              <div class="list1">
                <div class="list1Line">
                  <span class="leftText">取证平台：</span>
                  <span class="rightText">多媒体内容塑造与智能取证应用平台</span>
                </div>
                <div class="list1Line">
                  <span class="leftText">取证状态：</span>
                  <span class="rightText">
                    <span v-if="result.status == 3">取证完成</span>
                    <span v-if="result.status == 2">取证中</span>
                    <span v-if="result.status == 1">取证失败</span>
                  </span>
                </div>
                <div class="list1Line">
                  <span class="leftText">取证时间：</span>
                  <span class="rightText">{{result.createTime}}</span>
                </div>
            </div>
            </div>            
          </div>

          <div class="lineTitle">
            <div class="text">
              取证文件信息
            </div>
          </div>

          <div class="list2">
            <div class="list2_box" v-for="(item,index) in result.parameter" :key="index">
              <div class="left">
                <div class="list2Line">
                  <span class="leftText">文件名称：</span>
                  <span class="rightText">{{item.name}}</span>
                </div>
                <div class="list2Line">
                  <span class="leftText">文件大小：</span>
                  <span class="rightText">{{item.size}}</span>
                </div>
              </div>
              <div class="rightFile">
                <img v-if="type == 2" :src="src" alt="" class="flieSizeImg">
                <video v-else-if="type == 0"  :src="src" controls alt=""  class="flieSizeVideo"/>
                <audio v-else-if="type == 1"  :src="src" controls alt=""  class="flieSizeRadio"/>
              </div>
            </div>
            
              
          </div>

          <div class="lineTitle">
            <div class="text">
              取证程序信息
            </div>
          </div>

          <div class="list3">
              <div class="list3Line">
                <span class="leftText">取证程序：</span>
                <span class="rightText">{{result.programName}}</span>
              </div>
              <div class="list3Line">
                <span class="leftText">程序版本：</span>
                <span class="rightText">{{result.versionNumber}}</span>
              </div>
              <div class="list3Line">
                <span class="leftText">程序类型：</span>
                <span class="rightText">
                  <span v-if="result.programType == 2">取证程序</span>
                  <span v-else-if="result.programType == 1">塑造程序</span>
                </span>
              </div>
              <div class="list3Line">
                <span class="leftText">程序发布时间：</span>
                <span class="rightText">{{result.programCreateTime}}</span>
              </div>

              <div class="list3Line">
                <span class="leftText">程序作者：</span>
                <span class="rightText">{{result.team}}</span>
              </div>
              <div class="list3Line">
                <span class="leftText">程序状态：</span>
                <span class="rightText">
                  <span v-if="result.programStatus == 1">已上架</span>
                  <span v-else>已下架</span>
                </span>
              </div>
          </div>
          
          <div class="lineTitle">
            <div class="text">
              结果分析
            </div>
          </div>

          <div class="list4">
            <div class="left">
              <div class="list4Line">
                <span class="leftText">塑造概率：</span>
                <span class="rightText">{{result.forgeryProbability}}</span>
              </div>
              <div class="list4Line">
                <span class="leftText">取证耗时：</span>
                <span class="rightText">{{result.detectionTime}}</span>
              </div>
            </div>
            <div class="rightFile" v-if="outputImagePath || outputVideoPath || outputAudioPath">
              <img v-if="type == 2" :src="outputImagePath" alt="" class="flieSizeImg">
              <video v-else-if="type == 0"  :src="outputVideoPath" controls alt=""  class="flieSizeVideo"/>
              <audio v-else-if="type == 1"  :src="outputAudioPath" controls alt=""  class="flieSizeRideo"/>
            </div>
              
          </div>
          
          <div class="bottom">
            注：本取证结果仅对该文件负责
          </div>
        
        </div>
      </div>
      
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
import { getForensicById } from '../../../api/index'
export default {
  data(){
    return{
      id: '',
      result: [],
      type: 0 ,
      src: '',
      outputAudioPath: '' ,
      outputImagePath: '' ,
      outputVideoPath: '' ,
    }
  },
  mounted(){
    this.id = this.$route.query.id
    this.init()
  },
  methods:{
    init(){
      let id = this.id 
      let params = { id }
      let that = this
      getForensicById(params).then(res=>{
        if(res.data.message == 'success'){
          that.result = res.data.data
          that.result.parameter = []
          that.src = that.result.filePathParameters1
          that.outputAudioPath = that.result.outputAudioPath
          that.outputImagePath = that.result.outputImagePath
          that.outputVideoPath = that.result.outputVideoPath
          let leng = that.result.filePathParameters1.split('.')
          console.log(leng[leng.length -1])
          if(leng[leng.length -1] == 'mp4'){
            this.type = 0
          }else if(leng[leng.length -1] == 'png' || leng[leng.length -1] == 'jpg'|| leng[leng.length -1] ==  'jpeg'){
            this.type = 2
          }else if(leng[leng.length -1] == 'wav' ){
            this.type = 1
          }
          if(that.result.filePathParameters1 && that.result.filePathParameters1 != null){
            that.result.parameter.push({
              name: that.result.filePathParameters1.split('/')[that.result.filePathParameters1.split('/').length - 1],
              size: that.result.fileSize1,
              pic: '',
              title: '参数1: '
            })
          }
          if(that.result.filePathParameters2 && that.result.filePathParameters2 != null){
            that.result.parameter.push({
              name: that.result.filePathParameters2.split('/')[that.result.filePathParameters2.split('/').length - 1],
              size: that.result.fileSize2,
              pic: '',
              title: '参数2: '
            })
          }
          if(that.result.filePathParameters3 && that.result.filePathParameters3 != null){
            that.result.parameter.push({
              name: that.result.filePathParameters3.split('/')[that.result.filePathParameters3.split('/').length - 1],
              size: that.result.fileSize3,
              pic: '',
              title: '参数3: '
            })
          }
          if(that.result.filePathParameters4 && that.result.filePathParameters4 != null){
            that.result.parameter.push({
              name: that.result.filePathParameters4.split('/')[that.result.filePathParameters4.split('/').length - 1],
              size: that.result.fileSize4,
              pic: '',
              title: '参数4: '
            })
          }
        }else{
          that.$message.error(res.data.message)
        }
      })
    },
    download(){
      let e = document.querySelector('.containerMain')
      this.downloadPDF(e,'test')
    },
    downloadPDF(ele, pdfName) {
      window.scrollTo(0, 0);
      let eleW = ele.offsetWidth;// 获得该容器的宽
      let eleH = ele.offsetHeight;// 获得该容器的高
      let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
      let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

      var canvas = document.createElement("canvas");
      var abs = 0;

      let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
      let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

      if (win_out > win_in) {
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in) / 2;    // 获得滚动条宽度的一半
      }
      canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
      canvas.height = eleH * 2;

      var context = canvas.getContext("2d");
      context.scale(2, 2);
      context.translate(-eleOffsetLeft - abs, -eleOffsetTop);
      // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
      // translate的时候，要把这个差值去掉

      // html2canvas(element).then( (canvas)=>{ //报错
      // html2canvas(element[0]).then( (canvas)=>{
      html2canvas(ele, {
        scale:2,
        dpi: 150,
        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS: true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
      }).then((canvas) => {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 595.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 595.28 / contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new JsPDF('', 'pt', 'a4');
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        // console.log('处理完画布高度：'+ contentHeight)
        // console.log('每页高度：'+ pageHeight)
        if (leftHeight < pageHeight) {
          //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
          pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
          // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
        } else {    // 分页
          while (leftHeight > 10) {
            // console.log(leftHeight)
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 10) {
              pdf.addPage();
            }
          }
        }
        //可动态生成
        pdf.save(pdfName);
      })
    },

    

  }
}
</script>

<style lang='less' scoped>
.evidenceDetailspage{
  position: relative;
  overflow: auto;
  height: calc(100vh - 160px);
  background-color: #282C41;
  padding: 20px 0;
  box-sizing: border-box;
  .containerBox{
    width: 638px;
    min-width: 638px;
    margin: auto;
    // border: 1px solid #999;
    // box-shadow: 0 0 rgb(0 0 0 / 14%);
    position: relative;
    color: #fff;
    .download{
      position: absolute;
      left: -142px;
      top: 0;
      .d_botton{
        background-color: #324C64;
        border: 1px solid #00CEF0;
        color: #00CEF0;
        font-size: 14px;
      }
    }
    .containerMain{
      width: 638px;
      min-width: 638px;
      box-sizing: border-box;
      font-family: 'Arial Normal', 'Arial';
      .top{
        width: 100%;
        height: 210px;
        background-image: url('../../../assets/images/forensic/forensic_topbac.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .titleBox{
          
          display: flex;
          align-items: center;
          justify-content: flex-start;
          // font-weight: 400;
          // font-size: 20px;
          padding: 20px;
          box-sizing: border-box;
          .logo{
            width: 67px;
            height: 70px;
          }
          .title{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            >p{
              font-weight: bold;
              color: #FFFFFF;
            }
            >p:first-child{
              font-size: 18px;
            }
            >p:last-child{
              font-size: 32px;
            }
          }
        }
        .top_lineTitle{
          font-size: 16px;
          font-weight: bold;
          margin-left: 40px;
          margin-top: 12px;
          .text{
            color: #1BD6FD;
          }
        }
      }
      
      .lineTitle{
        border-width: 0px;
        height: 38px;
        line-height: 38px;
        display: flex;
        font-size: 16px;
        color: #1BD6FD;
        text-align: left;
        background-color: #616784;
        padding-left: 40px;
        font-weight: bold;
      }

      .list1{
        width: 100%;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        font-family: 'Microsoft YaHei';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        box-sizing: border-box;
        margin-top: 10px;
        .list1Line{
          width: 290px;
          margin-top: 3px;
          .leftText{
            display: inline-block;
            width: 85px;
          }
          .rightText{
          }
        }
        
      }
      .list2{
        width: 100%;
        height: 216px;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        padding-left: 40px;
        box-sizing: border-box;
        background-color: #384461;
        .list2_box{
          display: flex;
          height: 100%;
          align-items: flex-start;
          justify-content: flex-start;
          .left{
            width: 290px;
            height: 100%;
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            justify-content: center;
            .list2Line{
              margin-bottom: 15px;
              .leftText{
                display: inline-block;
                width: 85px;
              }
              .rightText{
              }
            }
          }
          .rightFile{
            width: 290px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .flieSizeImg{
              max-width: 276px;
              max-height: 180px
            }
            .flieSizeVideo{
              max-width: 276px;
              max-height: 180px;
            }
            .flieSizeRideo{
              width: 200px;
              height: 120px;
            }
          }
        }
        
      }

      .list3{
        width: 100%;
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        box-sizing: border-box;
        padding: 20px 0 20px 40px;
        background-color: #384461;
        .list3Line{
          width: 290px;
          margin-bottom: 12px;
          .leftText{
            display: inline-block;
            width: 85px;
          }
          .rightText{
          }
        }
      }
      .list4{
        width: 100%;
        height: 207px;
        font-family: 'Microsoft YaHei';
        font-weight: bold;
        font-style: normal;
        font-size: 12px;
        padding-left: 40px;
        box-sizing: border-box;
        background-color: #384461;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .left{
          width: 290px;
          height: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: center;
          flex-direction: column;
          flex-wrap: wrap;
          .list4Line{
            width: 100%;
            margin-bottom: 12px;
            .leftText{
              display: inline-block;
              width: 85px;
            }
            .rightText{
            }
          }
        }
        .rightFile{
          width: 290px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          .flieSizeImg{
            max-width: 276px;
            max-height: 180px
          }
          .flieSizeVideo{
            max-width: 276px;
            max-height: 180px;
          }
          .flieSizeRideo{
            width: 200px;
            height: 120px;
          }
        }
      }

      .bottom{
        color: #fff;
        font-weight: 400;
        background-color: #484E6B;
        font-size: 12px;
        line-height: 31px;
        text-align: right;
        padding-right: 28px;
        box-sizing: border-box;
      }
    }
    
  }
}
</style>